import React from 'react';
import { Form, Input, Button, Select, Divider, DatePicker, Upload, Icon, message } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './style.less';

const { Option } = Select;
const { RangePicker } = DatePicker;

let filePath;
const dateFormat = 'YYYY-MM-DD';
export default ({ formItemLayout, form, dispatch, data, paperList }) => {
  const { getFieldDecorator, validateFields } = form;
  const onValidateForm = () => {
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'exam/submitStepForm',
          payload: values
        });
      }
    });
  };

  return (
    <div>
      <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
        <Form.Item
          {...formItemLayout}
          label="考试名称"
        >
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入考试名称' }],
          })(
            <Input placeholder="请输入考试名称" />
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="考试说明"
        >
          {getFieldDecorator('login_title', {
            rules: [{ required: true, message: '请输入考试说明' }],
          })(
            <Input placeholder="请输入考试说明" />
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="别名"
        >
          {getFieldDecorator('alias', {
            rules: [{ required: true, message: '请选择登录方式' }],
          })(
            <Input placeholder="别名地址，用来登陆" />
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="登录方式"
        >
          {getFieldDecorator('login_type', {
            rules: [{ required: true, message: '请选择登录方式' }],
          })(
            <Select>
              <Option value="0">身份证+密码</Option>
              <Option value="1">姓名+身份证</Option>
              <Option value="2">姓名+执法证</Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="计时方式"
        >
          {getFieldDecorator('time_type', {
            rules: [{ required: true, message: '请选择登录方式' }],
          })(
            <Select>
              <Option value="0">固定时间</Option>
              <Option value="1">不固定时间</Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="每场时间"
        >
          {getFieldDecorator('duration', {
            rules: [{ required: true, message: '请输入输入每场时间' }],
          })(
            <Input placeholder="请输入分钟数" />
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="选择试卷"
        >
          {getFieldDecorator('papers_id', {
            rules: [{ required: true, message: '请选择一份试卷' }],
          })(
            <Select>
              {
                paperList && paperList.map((item) => {
                  return <Option value={item.id}>{item.name}</Option>
                })
              }
            </Select>
          )}
        </Form.Item>
        <Form.Item
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
          }}
          label=""
        >
          <Button type="primary" onClick={onValidateForm}>
            完成
          </Button>
        </Form.Item>
      </Form>
      <Divider style={{ margin: '40px 0 24px' }} />
      <div className={styles.desc}>
        <h3>说明</h3>
        <h4>考试日期安排</h4>
        <p>后面考场时间只能设置在这个考试日期之间。</p>
        <h4>选择试卷</h4>
        <p>需要先进入科目管理完成科目配置，然后进入试卷管理添加试卷，最后进入考试配置添加到考试中去。</p>
      </div>
    </div>
  );
};
